import styled, { keyframes } from "styled-components";

const slideInDown = keyframes`
    from {
        opacity: 0;
        transform: translateY(-4rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
`;

export const EaseBox = styled.div<{ dealay: number; bg: string }>`
    height: 100px;
    width: 200px;
    background-color: #f0f0f0;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: ${slideInDown} 1s ease-out both;
    animation-delay: ${props => props.dealay}s;
    background-color: ${props => props.bg};
`;

const EasePage = () => {
    const items = [{delay: 0, content: 'Box 1',color:'#fffcca'},
        {delay: 1, content: 'Box 2', color:'#f22cca'},
        {delay: 2, content: 'Box 3',color:'#42fcca'},
        {delay: 3, content: 'Box 4',color:'#2ff2ca'},
        {delay: 4, content: 'Box 5',color:'#6ff2c3'},
    ];
    return (
        <div>
        {items.map(item => 
            <EaseBox dealay={item.delay} bg={item.color}>{item.content}</EaseBox>
        )}
           
        </div>
    );
};

export default EasePage;